<template>
	<view class="box">

		<HeaderBar :title="title" :opacity="1" color="#fff" bg="#242232" iconColor="#fff" />
		<!-- <u-gap height="15"></u-gap> -->

		<view class="flex-row-between" style="margin: 20rpx 0;">
			<view class="search flex-1 flex-row-between">
				<view>
					<u--input placeholder="请输入关键字……" prefixIcon="search" v-model="params.keyword" @input="reload"
						prefixIconStyle="font-size: 22px;color: #7e7b8c;" border="none"
						placeholderStyle="color: #7e7b8c;font-size: 24rpx;" color="#fff">
					</u--input>
				</view>
				<view class="search-btn">搜索</view>
			</view>
			<!-- <view class="search-rig" @click="open">
				<image :src="ossUrl + `/static/card/8.png`"></image>
				<image :src="ossUrl + `/static/card/9.png`" mode="" class="search-rig-s"></image>
			</view> -->
		</view>
		<view class="flex-row" style="overflow-x: scroll;">
			<view class="circle-item-add" style="margin:0 30rpx;" :class="{ 'circle-item-ac': 0 === params.circle_id }"
				@click="setTab(0)">
				<view class="circle-item-add-icon">
					<view class="circle-item-add-icon-item">
						<uni-icons custom-prefix="iconfont" type="icon-quanbu" size="22" color="#ffffff"></uni-icons>
					</view>

				</view>
				<view class="circle-text">全部</view>
				<view class="triangle" :class="{ active: 0 === params.circle_id }"></view>
			</view>
			<view class="circle-item" :class="{ 'circle-item-ac': it.id === params.circle_id }" @click="setTab(it.id)"
				v-for="it in tab" :key="it.id">

				<view class="circle-item-add-icon">
					<image :src="it.logo" mode="aspectFill" class="circle-img" />
				</view>
				<view class="circle-text ellipsis">{{it.name || ''}}</view>
				<view class="triangle" :class="{ active: it.id === params.circle_id }"></view>
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="it in list" @click="toDetail(it.id)">
				<view class="list-item-t">
					<image class="list_item-img" :src="it.user.head" style="border-radius: 50%;"></image>
					<view class="list_item-header">
						<view class="list_item-header-h">
							<view class="list_item-header-h-l">
								<view class="list_item-header-h-name">
									{{ it.user.nickname }}
									<image :src="ossUrl + `/static/setting/${it.user.sex === '女' ? '7' : '6'}.png`"
										mode=""></image>
									<image :src="u" mode="" style="border-radius: 50%;margin-left: 10rpx;"
										v-for="u in it.Icon"></image>
								</view>
								<view class="list_item-header-h-address">
									<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
									{{ it.address || '' }}
								</view>
							</view>
							<view class="list_item-header-h-btn" @click.stop="closeActivity(it)"
								v-if="it.type == 3 && it.reservation.type == 1">
								关闭活动
							</view>
							<view class="" style="display: flex;">
								<view class="list_item-header-h-btn" style="margin-right: 20rpx;" @click.stop="shanchu(it)"
									v-if="it.type == 3 && it.reservation.type == 2">
									删除
								</view>
								<view class="list_item-header-h-btn" @click.stop="xiugai(it.id)"
									v-if="it.type == 3 && it.count == 0">
									修改
								</view>
							</view>
							
<!-- 	<view class="list_item-header-h-img" @click.stop="open(it)" v-if="it.type == 3 && it.reservation.type == 2">
								<image :src="ossUrl + `/static/setting.png`"></image>
							</view> -->

							<view class="list_item-header-h-img" @click.stop="open(it)" v-if="it.type != 3">
								<image :src="ossUrl + `/static/setting.png`"></image>
							</view>
						</view>
						<view class="list_item-header-time">
							{{ formatTimestamp(it.add_time) }}
						</view>
					</view>
				</view>


				<view class="list-item-content">
					<rich-text :nodes="replaceEmoji(it.content)"></rich-text>
				</view>
				<view class="course">
					<view class="course-list">
						<view class="course-list-item" v-for="(item, index) in it.upload" v-if="item">
							<view class="course-list-item-header" v-if="$getIsImage(item) === 1">
								<image :src="item" mode="aspectFill" class="course-list-item-header-video"
									@click.stop="getPrevImg(it.upload, item)"></image>
								<!-- 	<image :src="ossUrl + `/static/index/播放.png`" mode=""
									class="course-list-item-header-play"></image> -->
							</view>
							<view class="course-list-item-header" v-if="$getIsImage(item) === 2">
								<video :src="item"></video>
							</view>
						</view>
					</view>
				</view>
				<view class="list-item-activity" v-if="it.reservation && it.type == 3">
					<view class="list-item-activity-crad">
						<view class="list-item-activity-crad-item" @click.stop="copy(it.reservation.address)">
							地址：{{ it.reservation.address }}
						</view>
						<view class="list-item-activity-crad-item">
							开始时间：{{ it.reservation.event_date }} {{ it.reservation.start_time }}
						</view>
						<view class="list-item-activity-crad-item"
							v-if="it.reservation.type == 1 && it.reservation.actitveEndTime">
							<text>报名结束时间</text>：{{ it.reservation.actitveEndTime }}
						</view>
						<view class="list-item-activity-crad-item"
							v-if="it.reservation.type == 1 && it.reservation.actitveEndTime">
							<text>倒计时</text>：
							<!-- it.reservation.event_date + ' ' + it.reservation.end_time -->
							<countDownVue :time="getRemainingTimeToTimestamp(it.reservation.actitveEndTime)" />
						</view>
						<view class="list-item-activity-crad-item" @click.stop="copy(it.reservation.contact_info)">
							<text>手机号</text>：{{ it.reservation.contact_info || '' }}
						</view>
						<view class="list-item-activity-crad-item">
							<text>需报名人数</text>：{{ it.reservation.max_participants || 0 }}人
						</view>

						<view class="list-item-activity-crad-item" v-if="it.reservation.minUser">
							<text>最低举办人数</text>：{{it.reservation.minUser || 0}}人
						</view>

						<view class="list-item-activity-crad-item" v-if="it.reservation.price">
							<text>单人费用</text> ：{{it.reservation.price || 0}}元
						</view>

					</view>
					<view class="list-item-activity-people">
						<view class="list-item-activity-people-title" style="font-weight: bold;">报名表：</view>
						<!-- 看过 -->
						<view class="nums">
							<view class="nums-img">
								<image :src="item" mode="" v-for="item in it.head" style="border-radius: 50%;"></image>
							</view>
							<view class="nums-tx">等{{ it.count }}人已报名</view>
						</view>
					</view>

					<view class="list-item-activity-tx" @click.stop="toPeople(it)">查看报名人员</view>
					<view class="list-item-activity-btn-cancle" v-if="it.reservation.type == 2 && it.type == 3"
						style="color: #B8B8B8; border: 1rpx solid #B8B8B8;">
						已取消
					</view>
				</view>
				<view class="list-item-score" v-if="it.time_axis && it.type == 2">
					<view class="list-item-score-list">
						<view>成绩：<text>{{ it.time_axis.total_rod_number_sum }}</text></view>
						<view>距离：<text>{{ it.time_axis.max_distance_avg }}</text></view>
						<view>上球道：<text>{{ it.time_axis.fairway_hit_rate_percent }}</text></view>
						<view>上果岭：<text>{{ it.time_axis.green_in_regulation_rate_percent }}</text></view>
						<view>界外球：<text>{{ it.time_axis.out_of_bounds_count_sum }}</text></view>
						<view>下水数：<text>{{ it.time_axis.water_hazard_rate_percent }}</text></view>
						<view>沙坑数：<text>{{ it.time_axis.sand_trap_rate_percent }}</text></view>
						<view>切杆数：<text>{{ it.time_axis.chip_shots_sum }}</text></view>
						<view>推杆数：<text>{{ it.time_axis.putts_sum }}</text></view>
					</view>
				</view>

				<view class="list-item-footer">
					<view>

					</view>
					<view @click.stop="likeRquest(it.id)">
						<image :src="it.like_type == 1 ? ossUrl + `/static/18.png` : ossUrl + `/static/17.png`" mode="">
						</image>
						{{ it.like_count || 0 }}
					</view>
					<view>
						<image :src="ossUrl + `/static/22.png`" mode=""></image>
						{{ it.message_count || 0 }}
					</view>
					<!-- <view>
						<image :src="ossUrl + `/static/24.png`" mode=""></image>
						私信
					</view> -->
				</view>
			</view>
		</view>

		<!-- 操作菜单 -->
		<u-action-sheet :actions="listPopup" @select="select" :show="show" @close="close"></u-action-sheet>
		<!-- 占位 -->
		<!-- <u-gap height="80" color="white"></u-gap> -->
	</view>
</template>

<script>
	import HeaderBar from "@/components/header/header.vue";
	import {
		InformationLogManagement,
		InformationApplication,
		InformationCancellation,
		InformationLike,
		InformationDelLog,
		InformationCloseActivity,
		InformationScreen,
		circle_recently,
		recently_visited_circle
	} from '@/common/http/api.js'
	import countDownVue from './components/countDown.vue';
	import {
		convertToTimestamp,
		getRemainingTimeToTimestamp,
		formatTimestamp
	} from '@/common/time.js'
	export default {
		components: {
			HeaderBar,
			countDownVue
		},
		data() {
			return {
				top: 0,
				height: 0,
				width: 0,
				right: 0,
				listPopup: [{
						name: '修改',
						color: '#292929',
						fontSize: '15'
					},
					{
						name: '删除',
						color: '#292929',
						fontSize: '15'
					},
					{
						name: '取消',
						color: '#666',
						fontSize: '15'
					},
				],
				show: false,
				//分页
				params: {
					page: 1,
					circle_id: '',
					keyword: ''
				},
				isList: true,
				list: [],
				infoItem: '',
				opacity: 0,
				circleType: 1,
				id: '',
				searchInfo: '',
				tab: [],
				total: 0
			}
		},
		computed: {
			title() {
				if (this.params.circle_id === 0) {
					return '日志管理'
				}
				if (this.tab.some(i => i.id === this.params.circle_id)) {
					return this.tab.find(i => i.id === this.params.circle_id).name + `(${this.total})`
				}
				return '日志管理'
			}
		},
		onReady() {
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();
			this.top = menuButtonRect.top

			this.height = menuButtonRect.height

			this.width = menuButtonRect.width

			this.right = 375 - menuButtonRect.right
		},
		onShow() {
			this.getTabLis()

		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop;
			// 计算透明度值
			this.opacity = Math.min(scrollTop / 100, 1);
		},
		onReachBottom() {

			if (this.isList) {
				this.params.page++
				this.init()
			}
		},
		methods: {
			formatTimestamp,
			getRemainingTimeToTimestamp,
			setTab(id) {

				recently_visited_circle({
					id
				}).then(res => {
					this.id = id
					this.params.circle_id = id
					this.$nextTick(() => {
						this.reload()
					})
				})
			},
			getTabLis() {
				circle_recently().then(res => {
					this.id = res.data
					this.params.circle_id = res.data
					this.getTabs()

					InformationScreen({
						type: 1,
						circle_id: res.data
					}).then(res => {
						this.reload()
						this.searchInfo = res.data
					})
					this.firstLaoding = true
				})
			},
			getTabs() {
				recently_visited_circle({
					id: this.id
				}).then(res => {
					this.tab = res.data
				})
			},
			copy(name) {
				if (name) {
					uni.setClipboardData({
						data: name,
						success: function() {
							uni.showToast({
								duration: 3000,
								title: "已复制!",
								icon: 'none'
							})
						}
					});
				} else {
					uni.showToast({
						duration: 3000,
						title: "暂无内容复制！"
					})
				}

			},
			getImgCount(arr) {
				let count = 0
				try {
					arr.forEach(i => {
						if (this.$getIsImage(i) === 1) {
							count++
						}
					})
				} catch (e) {

				}
				return count
			},
			getPrevImg(arr, item) {

				let img = []
				arr.forEach(i => {
					if (this.$getIsImage(i) === 1) {
						img.push(i)
					}
				})
				let count = 0
				img.forEach((i, index) => {
					if (i === item) {
						count = index
					}
				})
				this.MpreviewImage(img, count)
			},
			getData() {
				this.reload()
			},
			reload() {
				this.isList = true
				this.params.page = 1
				this.list = []
				this.init()
			},

			init() {
				uni.showLoading()
				InformationLogManagement(this.params).then(res => {
					uni.hideLoading()
					this.total = res.count
					if (Array.isArray(res.data) && res.data.length > 0) {


						if (this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = [...this.list, ...res.data]
						}



					} else {
						this.isList = false
					}

				})
			},
			submit(id) {
				uni.showLoading()
				InformationApplication({
					id
				}).then(res => {
					uni.hideLoading()
					this.reload()
					uni.showToast({
						duration: 3000,
						title: '报名成功',
						icon: 'none'
					})
				})
			},
			cancle(id) {
				uni.showLoading()
				InformationCancellation({
					id
				}).then(res => {
					uni.hideLoading()
					this.reload()
					uni.showToast({
						duration: 3000,
						title: '取消成功',
						icon: 'none'
					})
				})
			},
			likeRquest(id) {
				uni.showLoading()
				InformationLike({
					id
				}).then(res => {
					uni.hideLoading()
					this.reload()
				})
			},
			getValue(value) {
				if (value > 0) {
					return value.toFixed(2)
				}
				return 0
			},
			xiugai(id){
				uni.navigateTo({
					url: '/pages/release/release?id=' +id
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pagesA/logManagement/detail?id=' + id
				})
			},
			
			open(it, type) {
				console.log('d')
				this.infoItem = it

				// if(it.type == 1) {
				// 	this.listPopup = [
				// 		{
				// 			name: '删除',
				// 			color: '#292929',
				// 			fontSize: '15'
				// 		},
				// 		{
				// 			name: '取消',
				// 			color: '#666',
				// 			fontSize: '15'
				// 		}
				// 	]
				// }
				// if(it.type == 2) {
				// 	this.listPopup = [
				// 		{
				// 			name: '修改',
				// 			color: '#292929',
				// 			fontSize: '15'
				// 		},
				// 		{
				// 			name: '取消',
				// 			color: '#666',
				// 			fontSize: '15'
				// 		}
				// 	]
				// }
				// if(it.type == 3) {
				// 	this.listPopup = [
				// 		// {
				// 		// 	name: '修改',
				// 		// 	color: '#292929',
				// 		// 	fontSize: '15'
				// 		// },
				// 		{
				// 			name: '取消',
				// 			color: '#666',
				// 			fontSize: '15'
				// 		}
				// 	]
				// }
				this.show = true
			},
			close(e) {
				this.show = false
			},
			shanchu(e) {

				uni.showModal({
					title: "提示",
					content: "是否删除",
					success: (eres) => {
						if (eres.confirm) {
							uni.showLoading()
							InformationDelLog({
								id: e.id
							}).then(res => {
								this.reload()
								this.$store.commit('setIsCircleRefresh', true)
							}).finally(err => {
								uni.hideLoading()
							})
						}
					}
				})




			},
			select(e) {
				console.log('点击', e)
				switch (e.name) {
					case '删除':
						let start = this.getRemainingTimeToTimestamp(this.infoItem.reservation.event_date + ' ' + this
							.infoItem.reservation.start_time)
						let end = this.getRemainingTimeToTimestamp(this.infoItem.reservation.event_date + ' ' + this
							.infoItem.reservation.end_time)
						if (start === 0 && end > 0) {
							uni.showToast({
								duration: 3000,
								title: '活动进行中！',
								icon: 'none'
							})
							return
						}
						uni.showLoading()
						InformationDelLog({
							id: this.infoItem.id
						}).then(res => {
							this.reload()
							this.$store.commit('setIsCircleRefresh', true)
						}).finally(err => {
							uni.hideLoading()
						})
						break;
					case '修改':
						uni.navigateTo({
							url: '/pages/release/release?id=' + this.infoItem.id
						})
						break;
					default:
						break;
				}
			},
			closeActivity(it) {
			
				uni.showModal({
					title: "提示",
					content:it.reservation.is_price==1?"是否关闭活动,将全员退还报名费":'是否关闭活动',
					success: (eres) => {
						if (eres.confirm) {
						     uni.showLoading()
						     InformationCloseActivity({
						     	id: it.id
						     }).then(res => {
						     	uni.hideLoading()
						     	this.reload()
						     })
						}
					}
				})
				
				
			
			},
			toPeople(it) {
				uni.navigateTo({
					url: '/pagesA/eventRegistration/eventRegistration?id=' + it.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {

		min-height: 100vh;
		background-color: #242232;
		// background: linear-gradient(to bottom, #b4f0df 0%, #f6f7f8 473rpx, #f6f7f8 473rpx, #f6f7f8 100%);
		/* 设置渐变色 */
	}

	image {
		width: 100%;
		height: 100%;
	}

	.filter {
		font-size: 26rpx;
		color: #7f6997;
		margin-right: 10rpx;

		&-img {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}
	}

	.triangle {
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 15rpx solid #242232;
		/* 控制三角形高度和颜色 */

		&.active {
			border-bottom-color: #fff;
		}
	}

	.circle-item {
		margin-right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.circle-img {
			width: 90rpx;
			height: 90rpx;
			background-color: red;
			border-radius: 10rpx;
		}

		.circle-text {
			font-size: 20rpx;
			color: #fff;
			text-align: center;
		}
	}


	.search {
		background-color: #33303f;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		margin: 0 20rpx;

		.search-btn {
			color: #fff;
			border-left: 1px solid #7e7b8c;
			font-size: 24rpx;
			padding: 0 20rpx;
		}
	}

	.barTitle {
		width: 100%;
		position: fixed;
		left: 0;
		top: -473rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #211C1E;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.list {
		width: 100%;
		background: white;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		min-height: 100vh;

		.list-item {
			width: 100%;
			background: #FFFFFF;
			margin-bottom: 12rpx;

			box-sizing: border-box;
			padding: 28rpx 32rpx;
			border-radius: 20rpx;

			.list-item-t {
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;
			}

			.list_item-img {
				width: 90rpx;
				height: 90rpx;
			}

			.list_item-header {
				min-width: 0;
				flex: 1;
				margin-left: 28rpx;

				.list_item-header-h {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.list_item-header-h-l {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16rpx;

						.list_item-header-h-name {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							margin-right: 35rpx;

							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}

						.list_item-header-h-address {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #7A7A7A;

							image {
								margin-right: 10rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.list_item-header-h-r {
						padding: 12rpx 18rpx;
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 24rpx;
						color: #999999;
					}

					.list_item-header-h-btn {
						font-size: 24rpx;
						padding: 10rpx 15rpx;
						border-radius: 40rpx;
						color: #B8B8B8;
						border: 1rpx solid #B8B8B8;
					}

					.list_item-header-h-img {
						width: 37rpx*1.8;
						height: 28rpx*1.8;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 37rpx;
							height: 8rpx;
						}
					}
				}

				.list_item-header-time {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 22rpx;
					color: #999999;
				}
			}

			.list-item-content {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #211C1E;
				margin-bottom: 30rpx;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				overflow: hidden;
				display: -webkit-box;
			}

			.course {

				width: 100%;
				margin-bottom: 35rpx;

				.course-list {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 12rpx;
				}

				.course-list-item {
					min-width: 0;
					background: #F6F7F8;

					.course-list-item-header {

						height: 184rpx;
						position: relative;
						margin-bottom: 11rpx;

						.course-list-item-header-play {
							position: absolute;
							right: 17rpx;
							bottom: 9rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}

					.course-list-item-title {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #292B3B;
						margin-bottom: 14rpx;
						box-sizing: border-box;
						padding: 0 7rpx;
					}

					.course-list-item-footer {
						display: flex;
						justify-content: space-between;
						align-items: center;
						box-sizing: border-box;
						padding: 0 7rpx;
						padding-bottom: 7rpx;

						.course-list-item-footer-status {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #FF8400;
						}

						.course-list-item-footer-nums {
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #292B3B;

							image {
								width: 19rpx;
								height: 15rpx;
								margin-right: 11rpx;
							}
						}
					}
				}
			}

			.list-item-activity {
				width: 100%;
				margin-bottom: 22rpx;

				.list-item-activity-crad {
					background: #F6F7F8;
					border-radius: 33rpx;
					width: 100%;
					box-sizing: border-box;
					padding: 24rpx 22rpx;
					margin-bottom: 25rpx;

					.list-item-activity-crad-item {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #211C1E;
						display: flex;
						align-items: center;
						margin-bottom: 33rpx;

						view {
							width: 47rpx;
							height: 51rpx;
							background: #FFFFFF;
							border-radius: 12rpx;
							border: 2px solid #DBDFE1;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #211C1E;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 8rpx;
						}
					}

					.list-item-activity-crad-item:last-child {
						margin-bottom: 0;
					}

				}

				.list-item-activity-people {
					width: 100%;
					margin-bottom: 22rpx;

					.list-item-activity-people-title {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #211C1E;
						margin-bottom: 31rpx;
					}

					.nums {
						width: 100%;
						height: 80rpx;
						background: #FFFFFF;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						margin: 0 auto;
						margin-bottom: 24rpx;

						.nums-img {
							//padding-left: 36rpx;
							min-width: 0;
							flex: 1;
							display: flex;
							align-items: center;

							image {
								width: 56rpx;
								height: 56rpx;
							}

							// 定义变量，设置循环次数
							$num-items: 10;

							// 循环生成样式
							@for $i from 1 through $num-items {
								image:nth-child(#{$i}) {
									transform: translateX($i * -6rpx);
								}
							}
						}

						.nums-tx {
							// width: 130rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #211C1E;
						}
					}
				}

				.list-item-activity-btn {
					width: 170rpx;
					height: 66rpx;
					background: #12B475;
					border-radius: 33rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-bottom: 22rpx;
				}

				.list-item-activity-tx {
					margin-bottom: 22rpx;
					font-size: 28rpx;
					color: #12B475;
				}
			}

			.list-item-score {
				background: #F6F7F8;
				border-radius: 33rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 22rpx 22rpx;
				margin-bottom: 25rpx;

				.list-item-score-list {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;

					view {
						margin-right: 10rpx;
						font-size: 22rpx;

						text {
							color: #12B475;
						}
					}
				}
			}

			.list-item-footer {
				padding-top: 24rpx;
				box-sizing: border-box;
				padding: 24rpx 24rpx 0;
				border-top: 1rpx solid #D7D7D7;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>view {
					display: flex;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 7rpx;
					}
				}
			}
		}

		.list-item:last-child {
			margin-bottom: 0;
		}
	}

	.list-item-footer {

		&>view {
			display: flex;
			align-items: center !important;
		}
	}

	.list-item-activity-btn-cancle {
		width: 170rpx;
		height: 66rpx;
		background: #fff;
		border: 1px solid #12B475;
		border-radius: 33rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		margin-bottom: 22rpx;
	}

	.list-item-score {
		padding-bottom: 0 !important;

		.list-item-score-list {
			align-items: none;
			flex-wrap: wrap;
			margin-bottom: 0rpx !important;

			view {
				margin-right: 30rpx;
				padding-bottom: 22rpx;
			}
		}
	}

	.circle-item-add {
		display: flex;
		flex-direction: column;
		align-items: center;


		.circle-text {
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			margin-bottom: 10rpx;
		}
	}

	.circle-item-ac {
		.circle-item-add-icon {
			background-color: #F4DEBF;
			border-radius: 20rpx;
		}

	}

	.circle-item-add-icon-item {
		background-color: #33303f;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.apply {
		font-size: 26rpx;
		padding: 5rpx 30rpx;
		background-color: #91c29b;
		border-radius: 20rpx;
		color: #fff;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.triangle {
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 15rpx solid #242232;
		/* 控制三角形高度和颜色 */

		&.active {
			border-bottom-color: #fff;
		}
	}

	.circle-item {
		margin-right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.circle-img {
			width: 90rpx;
			height: 90rpx;
			background-color: #e9e9e9;
			border-radius: 10rpx;
		}

		.circle-text {
			width: 100rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			margin: 10rpx 0;

		}
	}

	.circle-item-add-icon {
		width: 102rpx;
		height: 102rpx;
		border-radius: 20rpx;
		// background-color: #33303f;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 6rpx;

		&>view,
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx !important;
		}
	}

	.circle-text {
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		margin: 10rpx 0;
	}

	.circle-item:first-child {
		margin-left: 20rpx;
	}

	.search-layout {
		width: 100%;
		display: flex;
		align-items: center;

		.search {
			flex: 1;
			margin-right: 20rpx;
		}
	}

	.search-rig {
		display: flex;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 9rpx;
		}

		.search-rig-s {
			width: 52rpx;
			height: 25rpx;
		}

	}

	.barTitle {
		// width: 100%;
		// text-align: center;
		// font-family: PingFang SC;
		// font-weight: 400;
		// font-size: 30rpx;
		// color: #211C1E;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		background: #292639;
		//background: red;
	}
</style>